function numAt(num, interval) {
  if (num >= interval[0] && num < interval[1]) {
    return true
  }
}

export class CanvasCtx {
  constructor(canvas, width = 100, unit) {
    this.unit = unit
    const dpr = window.devicePixelRatio || 1;
    canvas.style.width = width + 'px'
    canvas.style.height = width + 'px'
    canvas.style.zIndex = 999
    canvas.setAttribute('width', width * dpr);
    canvas.setAttribute('height', width * dpr);
    this.canvas = canvas
    this.width = width
    this.ctx = canvas.getContext('2d')
    this.ctx.scale(dpr, dpr)
    this.ctx.save()
    this.drawLine(this.ctx)
    this.drawArc(this.ctx)
    this.initEvents()
    this.current = null
  }
  drawLine (ctx) {
    ctx.beginPath()
    ctx.strokeStyle = "#409eff";
    this.start = 10
    this.end = this.width - 10
    const midStart = this.width / 2 - 5
    const midEnd = this.width / 2 + 5
    ctx.moveTo(this.start, this.start)
    ctx.lineTo(midStart, this.start)
    ctx.moveTo(midEnd, this.start)
    ctx.lineTo(this.end, this.start)
    ctx.lineTo(this.end, midStart)
    ctx.moveTo(this.end, midEnd)
    ctx.lineTo(this.end, this.end)
    ctx.lineTo(midEnd, this.end)
    ctx.moveTo(midStart, this.end)
    ctx.lineTo(this.start, this.end)
    ctx.lineTo(this.start, midEnd)
    ctx.moveTo(this.start, midStart)
    ctx.lineTo(this.start, this.start)
    this.midEnd = midEnd
    this.midStart = midStart
    ctx.stroke()
  }
  drawArc (ctx) {
    const center = this.width / 2
    this.arcs = []
    this.arcs.push(new Arc(ctx, [center, this.start]))
    this.arcs.push(new Arc(ctx, [this.end, center]))
    this.arcs.push(new Arc(ctx, [center, this.end]))
    this.arcs.push(new Arc(ctx, [this.start, center]))
  }
  initEvents () {
    this.canvas.onclick = (e) => {
      const index = this.isInArcs(e.offsetX, e.offsetY)
      if (index) {
        this.current && this.current.redraw()
        this.current = this.arcs[index - 1]
        this.current.redraw('#ff0000')
        this.unit.camp.setPrevAddLink(this.unit)
      }
    }
  }
  isInArcs(x, y) {
    const c1 = numAt(x, [this.midStart, this.midEnd])
    const c2 = numAt(x, [this.end - 5, this.end + 5])
    const c3 = numAt(x, [this.start - 5, this.start + 5])
    const c4 = numAt(y, [this.midStart, this.midEnd])
    const c5 = numAt(y, [this.end - 5, this.end + 5])
    const c6 = numAt(y, [this.start - 5, this.start + 5])
    if (c1 && c6) {
      return 1
    } else if (c2 && c4) {
      return 2
    } else if (c1 && c5) {
      return 3
    } else if (c3 && c4) {
      return 4
    }
    return false
  }
}

class Arc {
  constructor(ctx, coor) {
    this.ctx = ctx
    this.radius = 5
    this.coor = coor
    this.draw()
  }
  draw (color= '#409eff') {
    this.ctx.strokeStyle = color
    this.ctx.beginPath()
    this.ctx.arc(...this.coor, this.radius, 0, Math.PI * 2, true)
    this.ctx.stroke()
  }
  clear () {
    const [x, y] = this.coor
    this.ctx.clearRect(x - 6, y - 6, 12, 12)
  }
  redraw(color= '#409eff') {
    this.clear()
    this.draw(color)
  }
}

// const canvas = document.getElementById('canvas')
// const selectBox = new CanvasCtx(canvas, 120)